<!-- 多选时的悬浮窗口 -->
<template>
  <div class="float-window" v-if="showFloatWindow">
    <el-icon class="close" @click="close"><Close /></el-icon>
    <div class="multiple-selection-top">
      已选择<span class="total">{{ selection.length }}</span
      >条数据
    </div>
    <el-table ref="floatTableRef" :data="selection" height="220rem" @row-click="onRowClick" @select="onSelect" @select-all="onSelectAll" :row-key="(row) => row.ID || row.id || JSON.stringify(row)">
      <el-table-column type="selection" label="序号" width="80"> </el-table-column>
      <el-table-column v-for="(item, index) in header" :key="index" :prop="item.key" :label="item.label"></el-table-column>
    </el-table>
    <div class="multiple-selection-footer">
      <el-button type="primary" size="small" :icon="DeleteFilled" @click="clear" :disabled="selection.length == 0">清空</el-button>
      <el-button type="primary" size="small" :icon="Delete" @click="del" :disabled="selfSelection.length == 0">删除</el-button>
    </div>
  </div>
</template>

<script setup name="FloatWindow">
import { ref, onBeforeMount, onMounted, computed, nextTick, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
import { Delete, DeleteFilled } from '@element-plus/icons-vue'
const instance = getCurrentInstance()

const selection = defineModel('selection', { default: [] }) // 父组件中table选中的数据
const props = defineProps({
  header: {
    type: Array,
    default: () => []
  },
  tableData: {
    //父组件中table的tableData 数据
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['toggleRowSelection'])
const showFloatWindow = ref(true)
const floatTableRef = ref()
const selfSelection = ref([])

const onRowClick = async (row, column, evetn) => {
  const index = selfSelection.value.findIndex((item) => JSON.stringify(row) == JSON.stringify(item))
  if (index == -1) {
    selfSelection.value.push(row)
    floatTableRef.value.toggleRowSelection(row, true)
  } else {
    selfSelection.value.splice(index, 1)
    floatTableRef.value.toggleRowSelection(row, false)
  }
}

//勾选悬浮窗口数据行的 Checkbox 时触发的事件
const onSelect = (selection, row) => {
  onRowClick(row)
}
//全选事件
const onSelectAll = (arr) => {
  selfSelection.value = arr
}
const clear = async () => {
  floatTableRef.value.clearSelection()
  instance.parent.refs.tableRef.clearSelection()
  selfSelection.value = []
  selection.value = []
}
const del = () => {
  selfSelection.value.forEach(async (item) => {
    console.log(item)
    const index = selection.value.findIndex((row) => JSON.stringify(row) == JSON.stringify(item))
    selection.value.splice(index, 1)
    const row = props.tableData.find((row) => JSON.stringify(row) == JSON.stringify(item))
    instance.parent.refs.tableRef.toggleRowSelection(row, false)
  })
  selfSelection.value = []
}
const close = () => {
  showFloatWindow.value = false
}
</script>
<style lang="scss" scoped>
.float-window {
  padding: 10px 20px 10px 10px;
  position: relative;
  width: 500px;
  height: 320px;
  box-shadow: var(--el-box-shadow-dark);
  background-color: #fff;
  border-radius: 4px;
  .close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 2001;
    cursor: pointer !important;
    font-size: 18px;
  }

  .multiple-selection-top {
    font-size: 16px;
    padding: 5px 10px;

    .total {
      color: var(--el-color-primary);
      font-weight: 700;
    }
  }

  .multiple-selection-footer {
    padding: 10px;
    text-align: center;
    cursor: default !important;
  }
  .el-table {
    width: 100%;

    cursor: default !important;
    ::v-deep(td.el-table__cell) {
      .cell {
        white-space: nowrap !important;
      }
    }
  }
}
</style>
